<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>图书管理系统</title>
  <link rel="stylesheet" href="./js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <style type="text/css">
    #update-book {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="col-md-6 col-md-offset-3">
      <h1>图书管理系统-操作界面</h1>

      <div id="app">
        <table class="table table-hover ">
          <br />
          <thead>
            <tr>
              <th>序号</th>
              <th>书名</th>
              <th>作者</th>
              <th>价格</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="book in filterBooks">
              <td>{{book.id}}</td>
              <td>{{book.name}}</td>
              <td>{{book.author}}</td>
              <td>{{book.price}}</td>
              <template v-if="book.id%2==0">
                <td class="text-left">
                  <button type="button" class="btn btn-success" class="del" @click="delBook(book)">删除</button>
                  <button type="button" class="btn btn-success" @click="updataBook(book)">修改</button>
                </td>
              </template>
              <template v-else>
                <td class="text-left">
                  <button type="button" class="btn btn-danger" class="del" @click="delBook(book)">删除</button>
                  <button type="button" class="btn btn-danger" @click="updataBook(book)">修改</button>
                </td>
              </template>
            </tr>
          </tbody>
        </table>
        <div class="row" style="margin-bottom: 30px;">
          <div class="col-md-3" style="text-align: right;font-size: 16px;line-height: 30px;">
            请输入书名
          </div>
          <div class="col-md-5">
            <input type="text" class="form-control" v-model="search" />
          </div>
        </div>
        <div id="add-book">
          <h3>添加书籍</h3>
          <hr />
          <div class="form-group">
            <label for="group">书名</label>
            <input type="text" class="form-control" id="group" v-model="book.name">
          </div>
          <div class="form-group">
            <label for="author">作者</label>
            <input type="text" class="form-control" id="author" v-model="book.author">
          </div>
          <div class="form-group">
            <label for="price">价格</label>
            <input type="text" class="form-control" id="price" v-model="book.price">
          </div>
          <button class="btn btn-primary btn-block" @click="addBook()">添加</button>
        </div>

        <div id="update-book">
          <h3>修改书籍</h3>
          <hr />
          <div class="form-group">
            <label for="group1">书名</label>
            <input type="text" class="form-control" id="group1" v-model="book.name">
          </div>
          <div class="form-group">
            <label for="author1">作者</label>
            <input type="text" class="form-control" id="author1" v-model="book.author">
          </div>
          <div class="form-group">
            <label for="price1">价格</label>
            <input type="text" class="form-control" id="price1" v-model="book.price">
          </div>
          <button class="btn btn-primary btn-block" @click="updatasBook()">完成</button>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/jquery.min.js"></script>
  <script src="./js//vue.min.js"></script>
  <script src="./js/tushu.js"></script>
</body>

</html>